<template>
  <div class="main">
    <router-view
      @change="change"
      @search="search"
      :hotSearchLists="hotSearchLists"
      :result="result"
      @list-id="listId"
      @del="del"
      :list-ids="listIds"
      :listen-id="listenId"
      @downdel="downdel"
      :collist="collist"
      :dList="dList"
      @favorite="favorite"
      @History="History"
      @download="download"
      @sleep="sleep"
    ></router-view>
      <!-- :timeleft="timeleft" -->


    <play-com
      v-show="listenId"
      @list-id="listId"
      :list-ids="listIds"
      :listen-id="listenId"
      :loveid="loveid"
      :downid="downid"
      @islove="islove"
      @isdown="isdown"
      :result="result"
      :indicate="indicate"
      @asleep="asleep"
    ></play-com>
      <!-- @ontimeupdateFun="ontimeupdateFun" -->


    <bottom-bar v-show="$route.meta.footshow"></bottom-bar>
  </div>
</template>

<script>
import PlayCom from "./components/PlayCom.vue";
import BottomBar from "./components/BottomBar.vue";
import { getJsonData } from "./api/home.js";
export default {
  data() {
    return {
      hotSearchLists: [],
      hotSearch: [],
      allSearch: [],
      result: [],
      listIds: 0,
      listenId: [],
      loveid: null,
      downid: null,
      dList: null, //下载列表
      collist: [], //收藏列表的id
      favorites: [], //收藏列表
      phistoryid:JSON.parse(localStorage.getItem("playhistory"))||[],//接受localStorage里的历史id
      phistorylist:2,//历史列表
      downloadid:3,
      indicate:false,
      // timeleft:0,
    };
  },
  methods: {
    listId([id, listenId]) {
      this.listIds = id;
      this.listenId = listenId;
      console.log(this.listIds);
      console.log(this.listenId);
      console.log(this.result);
    },
    del(id) {
      this.loveid = id;
    },
    downdel(id) {
      this.downid = id;
    },
    islove(list) {
      // console.log(list);
      this.collist = list;
      console.log(this.collist);
    },
    isdown(list) {
      this.dList = list;
      console.log(this.dList);
    },
    favorite(){
      this.result=[]
      this.result = this.favorites;
      console.log(this.result);
    },
    History(){
      this.result=[]
      this.result = this.phistorylist;
      console.log(this.result);
      console.log(this.phistoryid);
    },
    download(){//触发时更新result
      this.result=[]
      this.result = this.downloadid;
      console.log(this.result);
    },
    sleep(indicate){
      this.indicate=indicate
    },
    asleep(indicate){
      this.indicate=indicate
    },
    // 触发首页搜索,随机8个热门搜索传到search
    change() {
      this.hotSearchLists = [];
      let arr = [];
      let len = this.hotSearch.length;
      for (var i = 0; i < 8; i++) {
        arr[i] = parseInt(Math.random() * len);
        for (var j = 0; j < i; j++) {
          if (arr[i] == arr[j]) {
            i--;
          }
        }
      }
      arr.forEach((item) => {
        this.hotSearchLists.push(this.hotSearch[item]);
      });
    },
    search(name) {
      this.result = [];
      console.log(name);
      this.result = this.allSearch.filter((item) => {
        return item.name.indexOf(name) !== -1;
      });
      console.log(this.result);
      console.log(this.result.length);
    },
    // ontimeupdateFun(time){
    //   this.timeleft=time
    // }
  },
  created() {
    this.phistoryid=JSON.parse(localStorage.getItem("playhistory"))
    getJsonData().then((data) => {
      this.hotSearch = data.hotSearch;
      this.allSearch = data.allLists;
    });
  },
  components: {
    PlayCom,
    BottomBar,
  },
};
</script>

<style lang="scss" scoped>
// 公共css
@import "./assets/css/base.css";
.main {
  height: 100%;
  // padding-bottom: 85px;
}
</style>

